<!DOCTYPE html> <html>
<head>
<title>Items</title>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=0, shrink-to-fit=no">
<meta http-equiv="X-UA-Compatible" content="IE=Edge，chrome=1">
<link href="/jscss/style.css" rel="stylesheet" type="text/css" />
</head>
<body>
  <div class="container">
<blockquote>文本框下拉联想输入(支持代码)</blockquote>
引用<code>pullinput.js</code>，页面初始化时，在input文本框上绑定pull函数。<br/>
　catadata参数（必填）：下拉列表可显示的数组，一般包括codeid,title（表结构详见<a href="http://ciyphp.ciy.cn/admin/" target="_blank">后台演示</a>的代码维护）<br/>
　maxlist参数：默认同时显示最多条数。默认8条。<br/>
　multi参数：允许同时最多选择条数。默认1条(单选)。<br/>
　ulext参数：UL标签的属性字符串拼接，很灵活。一般用于自定义style、class或data等。<br/>
　lifunc参数：带val和cata两个参数的函数。自定义弹出条目li样式和显示内容<br/>
　valfunc参数：带li参数的函数。自定义最终在文本框中输入的内容，默认为li内的文本。<br/>
<br/>

<blockquote>示例代码</blockquote>
<pre>
&lt;input type="text" name="gbstr"/>
&lt;script src="/jscss/pullinput.js" type="text/javascript">&lt;/script>
$('input[name=gbstr]').pull({
    catadata:[{"codeid":"HXN","title":"和谐N"},{"codeid":"DFD","title":"地方D"}]//必填，文本框可以联想输入汉字或拼音首字母
    ,lifunc:function(val,cata){}//可选函数，自定义弹出条目li的样式和显示内容
    ,valfunc:function(li){}//可选函数，自定义最终在文本框中输入的内容，默认为li内的文本。
});
注意:应在上一级容器中加入position:relative;
</pre>

<blockquote>运行</blockquote>
<form>
    <div class="form-group">
        <label>单条选择：</label>
        <div>
	        <input type="text" name="inp1" value=""/>
	         请输入 20 <code>或</code> zc <code>或</code> 众产
        </div>
    </div>
    <div class="form-group">
        <label>多条选择：</label>
        <div>
	        <div><table><tr><td style="flex-wrap: wrap;display:flex;"></td><td style="vertical-align:top;">
	        	<input type="text" name="inp2" value="IT工程规范,其他"/>
	        </td></tr></table></div>
        </div>
       	<span> 请输入 20 <code>或</code> zc <code>或</code> 众产</span>
    </div>
                    <div class="form-group">
                        <div style='text-align:center;'>
                        <button type="button" class="btn" onclick="update(this);">提交按钮</button>
                        </div>
                    </div>
</form>    
  </div>
  <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<script src="/jscss/jquery-1.12.4.min.js"></script>
<script src="/jscss/ciy.js"></script>
<script src="/jscss/pinyin.js"></script>
<script src="/jscss/pullinput.js"></script>
<script type="text/javascript">
'use strict';
//第一个默认初始化
var datas = [{"codeid":"001","title":"众产未来"},
	{"codeid":"101","title":"众产农林"},
	{"codeid":"102","title":"智慧农牧"},
	{"codeid":"201","title":"信任链"},
	{"codeid":"202","title":"信任生态"},
	{"codeid":"203","title":"无条件信任"},
	{"codeid":"204","title":"督控体系"},
	{"codeid":"205","title":"信息披露"},
	{"codeid":"210","title":"IT工程规范"},
	{"codeid":"300","title":"事业白皮书"}];
function update(dom) {
    var postparam = ciy_getform(dom);
    console.log(postparam);
    var pdatas = postparam.inp2_data.split(',');
    var pindexs = postparam.inp2_index.split(',');
    for(var i in pindexs){
    	if(pindexs[i] > -1)
    		console.log(datas[pindexs[i]]);
    	else
    		console.log('自定义:'+pdatas[i]);
    }
    var j = JSON.stringify(postparam);
    j = j.replace(/,/g,',<br/>');
    ciy_alert(j+"<br/><code>详细JSON，请F12看console信息</code>");
}
$(function(){
    $('input[name=inp1]').pull({
        catadata:datas
    });
    $('input[name=inp2]').pull({
        catadata:datas,
        multi:10
    });
});
</script>
</body></html>